<template>
  <el-row style="min-width: 1500px">
    <el-col :span="24">
      <div class="wrap_notifier_content">
        <div class="wrap_notifier_content--head">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="">所有站内信</el-menu-item>
            <el-menu-item index="2">已读站内信</el-menu-item>
            <el-menu-item index="1">未读站内信</el-menu-item>
          </el-menu>
        </div>
        <div class="wrap_notifier_content--table_content">
          <div
            style="
              display: flex;
              justify-content: space-between;
              flex-direction: row-reverse;
            "
          >
            <div class="filterCondition x-flex">
              <div class="x-flex">
                <el-date-picker
                  v-model="storageDate"
                  style="width: 200px"
                  placeholder="请选择日期"
                  type="date"
                  size="large"
                  @change="Dateclick"
                />
                <el-input
                  style="width: 200px"
                  v-model="searchInput"
                  clearable
                  :suffix-icon="Search"
                  class="x-m-l-15"
                  placeholder="请输入名称"
                  size="large"
                  @change="inputClick"
                />
              </div>
            </div>
            <div class="override_button">
              <el-button type="primary" size="large" @click="mailMessageDelects"
                >删除</el-button
              >
              <el-button size="large" @click="mailMessagereads"
                >标记为已读</el-button
              >
              <el-button size="large" @click.once="AllmailMessaged"
                >全部标记为已读</el-button
              >
            </div>
          </div>
          <div class="table">
            <el-table
              ref="multipleTableRef"
              :data="listdata"
              :header-cell-style="{ background: '#F6F7F9' }"
              height="630"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <template #empty>
                <div class="no-data">
                  <el-empty
                    :image="require('../../assets/nothave.png')"
                    style="margin-top: 30%"
                  >
                  </el-empty> 
                </div>
              </template>
              <el-table-column type="selection" width="40" />
              <el-table-column
                label="名称"
                prop="messageTitle"
                show-overflow-tooltip
              >
                <template #default="{ row }">
                  <div style="cursor: pointer" @click="onNotifies(row.id)">
                    {{ row.messageTitle }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="时间" prop="creationDate" width="260" />
            </el-table>
          </div>
          <div class="page_num">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              :total="total"
              background
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { onMounted, ref, shallowRef } from "vue";
import { ElMessage, ElTable } from "element-plus";
import {
  mailMessagePage,
  mailMessageDelect,
  AllmailMessage,
  mailMessageread,
} from "../../api/advertising/index";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const activeIndex = ref("");
const handleSelect = (key: string, keyPath: string[]) => {
  activeIndex.value = key;
  mailMessagePagesd();
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<programMsgTable[]>([]);
const ids = ref();
const handleSelectionChange = (val: programMsgTable[]) => {
  ids.value = val.map((e: any) => e.id);
};
const storageDate = shallowRef(""); //日历
const searchInput = ref(""); //搜索框
const listdata = ref();
//页面切换
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(20);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  mailMessagePagesd();
};
const onNotifies = (ids: any) => {
  // pageJudgment用来判断是“站点”的内容还是“公告”的内（pageJudgment只要为真就行是站点）
  router.push({
    path: "/index/notifistContent",
    query: { pageJudgment: 1, rest: ids },
  });
  localStorage.setItem("HomeId", ids);
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  mailMessagePagesd();
};
//删除
const mailMessageDelects = async () => {
  let res = await mailMessageDelect(ids.value);
  if (res.data.code == 1) {
    mailMessagePagesd();
    ElMessage({ message: res.data.msg, type: "success", duration: 1000 });
  } else {
    ElMessage({ message: res.data.msg, type: "error", duration: 1000 });
  }
};
// 全部标记为已读
const AllmailMessaged = async () => {
  let res = await AllmailMessage();
  if (res.data.code == 1) {
    mailMessagePagesd();
    ElMessage({ message: res.data.msg, type: "success", duration: 1000 });
  } else {
    ElMessage({ message: res.data.msg, type: "error", duration: 1000 });
  }
};
// 标记为已读
const mailMessagereads = async () => {
  let res = await mailMessageread(ids.value);
  if (res.data.code == 1) {
    mailMessagePagesd();
    ElMessage({ message: res.data.msg, type: "success", duration: 1000 });
  } else {
    ElMessage({ message: res.data.msg, type: "error", duration: 1000 });
  }
};
var endDates = ref("");
var startDates = ref("");
var noticeTitles = ref("");
// 时间
const Dateclick = (val: any) => { 
  if (val) {
    const dateString = val;
    // 将日期字符串转换为日期对象
    const date = new Date(dateString);
    // 获取年、月、日
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    // 格式化为 YYYY-MM-DD
    const formattedDate = `${year}-${month}-${day}`;
    endDates.value = formattedDate + " 23:59:59";
    startDates.value = formattedDate + " 00:00:00";
    mailMessagePagesd();
  } else {
    endDates.value = "";
    startDates.value = "";
    mailMessagePagesd();
  }
};
// 搜索
const inputClick = (val: any) => {
  noticeTitles.value = val;
  mailMessagePagesd();
};
// 分页
const mailMessagePagesd = async () => {
  let data = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    messageStatus: activeIndex.value,
    startDate: startDates.value,
    endDate: endDates.value,
    messageTitle: noticeTitles.value,
  };
  let res = await mailMessagePage(data);
  listdata.value = res.data.data.content;
  total.value = res.data.data.totalElements;
};
onMounted(() => {
  mailMessagePagesd();
});
</script>
<style lang="scss" scoped>
::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  outline: 0;
  color: var(--el-menu-hover-text-color);
  background-color: #ffffff !important;
}
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
.wrap_notifier_content {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  box-sizing: border-box;
  overflow-y: auto;

  &--table_content {
    width: 100%;

    .override_button {
      line-height: 70px;
    }
    .page_num {
      width: 100%;
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
  }
}
</style>
